<!-- 
《音频上传页》
 
***显示***
1.选择的music列表
2.按钮，上传、重置、获取
3.上传到的album信息（待完善）
 
***自动***
无
 
***步骤***
1.选择歌曲
2.选择album
	1）自动获取所有album信息，不获取歌曲信息
3.新建album
	1）更新云端albumList
	2）自动选择需要上传到的album
4.上传歌曲到云端
	1）上传云存储
	2）更新music云数据
	3）更新album云数据
	4）删除本地musicList列表

-->
<template>
	<view class="upLoadMusic">
		<view class="status-bar"></view>
		<view class="mask-layer" @tap.stop="hide" v-show="status.maskLayer"></view>

		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="上传歌曲" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='上传歌曲'></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="head">
				<view class="text">
					添加Tag：
					<view class="box" @tap="chooseAblum()">
						{{album.name}}
						<text class="iconfont" v-if="!album.name">&#xe744;</text>
					</view>
				</view>
				<view class="upload" @tap="upLoadFile()">
					<text class="iconfont">&#xe61d;</text>
				</view>
			</view>

			<!-- 歌曲列表 -->
			<musicList class="musicList" :musicList="musicList"></musicList>
			<!-- 新增歌曲 -->
			<view class="music-item-add" @tap="chooseFile()">
				<text class="iconfont add">&#xe744;</text>
			</view>

			<!-- Tag窗口 -->
			<view class="window-list" v-show="status.chooseTag">
				<view class="head">
					<view class="title">
						{{status.createAlbum?'新建Tag':'已有Tag'}}
					</view>
					<view class="iconfont add" @tap="createAlbum()">
						{{status.createAlbum?'已有':'新建 &#xe744;'}}
					</view>
				</view>
				<view class="normal" v-if="!status.createAlbum">
					<scroll-view scroll-y="true">
						<view class="albumInfo" v-for="(item,index) in albumList" @tap="pickAlbum(index)">
							<text class="name">
								{{item.name}}</text>
							<text class="number">(共{{item.number?item.number:0}}首)</text>
							<text class="desc">
								{{item.desc}}</text>
							<text class="iconfont" @tap.stop="deleteAlbum(index)">
								&#xe605;</text>
						</view>
						<view class="hint">没有更多了</view>
					</scroll-view>
				</view>
				<view class="createAlbum" v-else>
					<view class="name">
						<text>名字:</text>
						<input v-model="newAlbum.name" />
					</view>
					<view class="desc">
						<text>描述:</text>
						<textarea v-model="newAlbum.desc"></textarea>
					</view>
					<view class="submit" @tap="submit()">
						创建</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import musicList from '../../components/musicList/musicList.vue'
	import headBarAPP from '../../components/headBarAPP/headBarAPP.vue'
	import headBarWX from '../../components/headBarWX/headBarWX.vue'
	// 导入云对象
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const Album = uniCloud.importObject('Album', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				albumList: [],
				musicList: [],
				imageValue: [],

				status: {
					maskLayer: false,
					chooseTag: false,
					createAlbum: false,
				},
				album: {
					_id: '',
					name: '',
					desc: '',
					musicList: []
				},
				newAlbum: {
					name: '',
					desc: '',
					number: 0,
				},
			}
		},
		components: {
			headBarAPP,
			headBarWX
		},
		onLoad() {},
		methods: {
			/**选择文件
			 * 
			 */
			chooseFile() {
				console.log('选择文件');
				// #ifdef H5
				console.log('web');
				new Promise((resolve, reject) => {
					uni.chooseFile({
						count: 40,
						type: 'all',
						extension: ['.mp3'],
						success(res) {
							resolve(res);
						},
						fail(err) {
							reject(err);
						}
					});
				}).then(res => {
					console.log(res);
					res.tempFiles.forEach((item, index) => {
						const i = item.name.indexOf('.');
						let name = item.name.slice(0, i);
						let extension = item.name.slice(i, item.name.length);
						// console.log(i, name, extension);
						let path = item.path;
						this.musicList.push({
							name: name,
							extension: extension,
							tempFilePath: path,
						});
					})
					console.log(this.musicList);
				});
				// #endif
			},
			/**选择歌单
			 * 
			 */
			async chooseAblum() {
				this.status.maskLayer = !this.status.maskLayer;
				this.status.chooseTag = !this.status.chooseTag;
				uni.showLoading({
					title: '加载中...',
				})
				let res = await Album.GetAlbumList_e_albumList();
				this.albumList = res.data
				console.log(this.albumList);
				uni.hideLoading();
			},
			/** 确认选择歌单
			 *
			 */
			pickAlbum(index) {
				this.album._id = this.albumList[index]._id;
				this.album.name = this.albumList[index].name;
				this.album.number = this.albumList[index].number;
				this.album.desc = this.albumList[index].desc;
				this.status.chooseTag = false;
				this.status.maskLayer = false;
			},
			/*
			 * 
			 */
			createAlbum() {
				this.status.createAlbum = !this.status.createAlbum;
			},
			deleteAlbum(index) {
				let albumID = this.albumList[index]._id;
				this.albumList.splice(index, 1);
				console.log(albumID);
				Album.deleteAlbum(albumID).then(res => {
					console.log(res);
				});
			},
			hide() {
				console.log('hideDownMenu');
				this.status.maskLayer = false;
				this.status.chooseTag = false;
			},
			submit() {
				console.log(this.newAlbum);
				Album.createAlbum(this.newAlbum).then(res => {
					console.log(res);
					this.newAlbum._id = res.id;
					this.albumList.unshift(this.newAlbum);
					this.newAlbum = {
						name: '',
						desc: '',
						number: 0,
					};
					this.status.createAlbum = !this.status.createAlbum;
				});
			},
			// 上传所有文件及信息
			async upLoadFile() {
				console.warn(this.album)
				if (this.musicList.length == 0) {
					uni.showToast({
						title: '未选择上传歌曲',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				let p = [];
				uni.showLoading({
					title: '上传中...',
				});
				//1. 上传文件到云储存
				//1.1 判断新增音乐文件 不改变this.musiclist（上传专辑信息时还需要使用）
				let albumMusicList = [];
				let newMusicList = [];
				let cloudMusicList = (await cloudMusic.getMusicList()).data;
				console.log('云端已有音乐文件：', cloudMusicList);
				console.log('新选择的音乐文件：', this.musicList);
				this.musicList.forEach((item, index) => {
					if (cloudMusicList.length != 0) {
						for (let i = 0; i < cloudMusicList.length; i++) {
							if (item.name == cloudMusicList[i].name) {
								albumMusicList.push(cloudMusicList[i]);
								break;
							} else if (i == cloudMusicList.length - 1) {
								newMusicList.push(item);
							}
						}
					} else {
						newMusicList.push(item);
					}
				});
				console.log('新增加的音乐文件：', newMusicList);
				//1.2 上传新增音乐文件
				for (let i = 0; i < newMusicList.length; i++) {
					let item = newMusicList[i];
					let res = await uniCloud.uploadFile({
						cloudPathAsRealPath: true,
						cloudPath: "cloud/musics/" + item.name,
						filePath: item.tempFilePath,
						onUploadProgress: function(progressEvent) {
							let percentCompleted = Math.round(
								(progressEvent.loaded * 100) / progressEvent.total
							);
							console.log(percentCompleted);
						}
					});
					let cloudFilePath = res.fileID;
					newMusicList[i].cloudFilePath = cloudFilePath;
					let musicInfo = newMusicList[i];
					let res1 = await cloudMusic.AddMsic(musicInfo)
					let t = {
						_id: res1.id,
						name: musicInfo.name,
						cloudFilePath: musicInfo.cloudFilePath,
					}
					albumMusicList.push(t);
				}
				uni.hideLoading();

				return 0;
				//2. 上传专辑信息
				//2.1 判断专辑新增音乐
				let cloudAlbumMusicList = (await Album.getAlbumInfo(this.album._id)).musicList;
				let albumMusicList_add = [];
				console.log('云端专辑音乐列表：', cloudAlbumMusicList);
				albumMusicList.forEach((item, index) => {
					albumMusicList_add.push(item._id);
				});
				console.log('云端专辑音乐新增列表：', albumMusicList_add);
				//2.2 更新专辑新增音乐信息
				this.album.musicList = albumMusicList_add;
				console.log('待更新专辑信息', this.album);
				Album.PushBack_all_publicAlbum(this.album._id, albumMusicList_add).then(res => {
					console.log(res);
				});
				return 0;

				//更新本地专辑信息
				let res = await Album.getAlbumInfo(this.album._id);
				this.album = res;
				console.log('更新后专辑信息', this.album);
			},
			/**下拉菜单
			 * 
			 */
			pullDownMenu() {
				console.log('下拉菜单');
			},
		}
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			margin: auto 20rpx;
			font-size: $font-size-l-m;
			font-weight: 600;
			display: flex;
			align-items: center;

			.box {
				min-width: 60rpx;
				height: 60rpx;
				background-color: rgba(220, 232, 229, 0.8);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;

				.iconfont {
					margin: auto;
					font-size: $icon-size-m-m;
				}
			}
		}

		.upload {
			margin-right: 20rpx;

			.iconfont {
				width: 100rpx;
				height: 100%;
				font-size: $icon-size-l-m;
			}
		}
	}

	// 歌曲列表
	.musicList {
		max-height: 1450rpx;
		width: 100%;
	}

	// 新增按钮
	.music-item-add {
		width: 100%;
		height: 100rpx;
		background-color: rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: $icon-size-l-m;
		}
	}

	// Tag窗口
	.window-list {
		z-index: 100;
		position: fixed;
		top: 20vh;
		left: 50%;
		transform: translateX(-50%);
		width: 80vw;
		height: 50vh;
		border-radius: 40rpx;
		background-color: white;
		box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;

		.head {
			height: 100rpx;
			position: relative;

			.title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: $font-size-l-m;
			}

			.iconfont.add {
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 140rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				position: absolute;
				font-size: $font-size-m-m;
				background-color: rgba(176, 232, 111, 0.5);
			}
		}

		.normal {
			scroll-view {
				height: calc(50vh - 100rpx - 20rpx);

				.albumInfo {
					width: 90%;
					height: 80rpx;
					margin: auto;
					margin-bottom: 10rpx;
					position: relative;
					// background-color: rebeccapurple;

					.name {
						font-size: $font-size-l-m;
					}

					.number {
						margin-left: 10rpx;
						font-size: $font-size-m-m;
						color: $text-color-grey;
					}

					.desc {
						position: absolute;
						width: 100%;
						top: 40rpx;
						left: 0;
						font-size: $font-size-m-m;
						color: $text-color-grey;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.iconfont {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}

				}

				.hint {
					display: flex;
					justify-content: center;
					color: $text-color-disable;
				}
			}
		}

		.createAlbum {
			.name {
				width: 90%;
				margin: auto;

				text {
					font-size: $font-size-l-m;
				}

				input {
					margin-top: 20rpx;
					height: 70rpx;
					border: 3rpx solid rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 20rpx;
				}
			}

			.desc {
				width: 90%;
				margin: auto;
				margin-top: 30rpx;

				text {
					font-size: $font-size-l-m;
				}

				textarea {
					margin-top: 20rpx;
					min-height: 60rpx;
					border: 3rpx solid rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;
					/* 禁止调整大小 */
					resize: none;
					box-sizing: border-box;
					padding: 20rpx;
				}
			}

			.submit {
				margin: auto;
				margin-top: 40rpx;
				width: 260rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40rpx;
				background-color: rgba(111, 232, 204, 0.4);
				font-size: $font-size-l-m;
				color: $text-color-grey;
			}
		}

	}
</style>